<template>
    <div class="page-container">
        <div class="btn-container">
            <a-button type="primary" @click="onEdit(0)">新增</a-button>
        </div>
        <div class="filter-container">
            <div class="filter-item filter-item__separator">
                <span class="filter-item__label">分站名称:</span>
                <div class="filter-item__control"><a-input placeholder="请输入关键词,例如:分站名称" v-model="params.key" style="width:300px"></a-input></div>
            </div>
            <div class="filter-item">
                <span class="filter-item__label">所属地区:</span>
                <div class="filter-item__control">
                    <a-cascader v-model="params.cityCodes" expandTrigger="hover"
                                :options="cityList" :fieldNames="{label: 'name', value: 'code', children: 'children'}"
                                placeholder="请选择所属地区" style="width: 300px;" />
                </div>
            </div>
            <div class="filter-action">
                <a-button type="primary" @click="onSearch">筛选</a-button>
            </div>
        </div>
        <div class="grid-container">
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>

                <template slot="isDefault" slot-scope="text,record">
                    <a-switch checkedChildren="是" unCheckedChildren="否" @change='onChangeDefault(record)' :checked="record.isDefault==true" />
                </template>

                <template slot="status" slot-scope="text,record">
                    <a-switch checkedChildren="启用" unCheckedChildren="禁用" @change='onChangeStatus(record)' :checked="record.status=='AVAILABLE'" />
                </template>
                <template slot="staff" slot-scope="staff">
                    {{staff.name}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a class="ant-btn-text" @click="onRegionList(record.id)">区域管理</a>
                    <a-divider type="vertical"/>
                    <a @click="onEdit(record.id)"  class="ant-btn-text">
                        <a-icon type="form" />
                    </a>
                    <a-divider type="vertical"/>
                    <a @click="onDeleted(record)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                    <a-pagination  :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
    </div>
</template>
<script>
    import {findList,changeStatus,findCityList,deleted,changeDefault} from "../../api/site";

    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '名称',dataIndex: 'name',width: 120,align:'left'},
        {title: '所属地区',dataIndex: 'cityName',width: 150,align:'left'},
        {title: '站长',dataIndex: 'staff',width: 100,align:'left',scopedSlots: { customRender: 'staff' }},
        {title: '默认分站',dataIndex: 'isDefault',width: 100,align:'center',scopedSlots: { customRender: 'isDefault' }},
        {title: '状态',dataIndex: 'status',width: 100,align:'center',scopedSlots: { customRender: 'status' }},
        {title: '操作',key: 'operation',align:'center',width: 150,scopedSlots: { customRender: 'operation' }}];
    export default {
        data() {
            return {
                columns,
                dataList: [],
                params:{
                    cityCodes:undefined,
                    cityCode:undefined,
                    key:'',
                    current:1,
                    pageSize:10,
                    sorter:{
                        field:'',
                        order:'',
                    },
                },
                total:0,
                loading:false,
                cityList:[],
            }
        },
        methods: {
            onSearch(){
                this.params.current = 1;
                if(this.params.cityCodes!=null && this.params.cityCodes.length >0){
                    this.params.cityCode = this.params.cityCodes[this.params.cityCodes.length -1]
                }else{
                    this.params.cityCode = '';
                }
                this.getList();
            },
            onChange(current){
                this.params.current = current;
                this.getList();
            },
            //改变默认分站
            onChangeDefault(row){
                if(row.isDefault == true){
                    this.$message.info("不能取消默认分站!");
                    return false;
                }
                if(row.status == 'FREEZE'){
                    this.$message.info("请先启用该分站!");
                    return false;
                }
                let _this = this;
                this.$confirm({
                    title: '确认更换默认分站吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        row.isDefault = row.isDefault==true?false:true;
                        _this.handleChangeDefault(row.id);
                    }, onCancel() {},
                })
            },
            async handleChangeDefault(id){
                let _this = this;
                let resp = await changeDefault(id);
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.getList();}})
                }else{
                    this.$error({title:resp.msg,okText:'确定'})
                }
            },
            //上下架
            onChangeStatus(row){
                let statusStr = "";
                statusStr = row.status=='AVAILABLE'?'禁用':'启用';
                if(row.status == 'AVAILABLE' && row.isDefault == true){
                    this.$message.info("不能将默认分站禁用!");
                    return false;
                }
                let _this = this;
                this.$confirm({
                    title: '确认'+statusStr+row.name+'吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        row.status = row.status=='AVAILABLE'?'FREEZE':'AVAILABLE';
                        _this.handleChangeStatus(row.id,row.status);
                    }, onCancel() {},
                })
            },
            async handleChangeStatus(id,status){
                let _this = this;
                let resp = await changeStatus(id,status);
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.getList();}})
                }else{
                    this.$error({title:resp.msg,okText:'确定'})
                }
            },
            //区域列表页
            onRegionList(id){
                this.$router.push({name:'SiteRegionList',query:{siteId:id}});
            },
            //编辑
            onEdit(id){
                this.$router.push({name:'SiteEdit',query:{id:id}});
            },
            //删除
            onDeleted(row){
                if(row.isDefault == true){
                    this.$message.info("不能删除默认分站!");
                    return false;
                }
                let _this = this;
                this.$confirm({
                    title: '确认删除该分站吗?',
                    // content:'将同时删除分站下的区域相关信息',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleDelete(row.id);},
                    onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deleted(id);
                if(this.qUtil.validResp(resp)) {
                    this.$success({title:'删除成功!',okText:'确定'});
                    this.getList();
                }else{
                    this.$error({title:resp.msg,okText:'确定'});
                }
            },
            async onLoadCityList(){
                let resp = await findCityList();
                if(this.qUtil.validResp(resp)){
                    this.cityList = resp.data.cityList
                }
            },
            async getList(){
                this.loading = true;
                let resp = await findList(this.params);
                this.loading = false;
                if(!this.qUtil.validResp(resp)) return false;
                this.total = resp.data.total;
                this.dataList = resp.data.dataList;
                console.log("==dataList",this.dataList);
            }
        },
        mounted(){
            this.onLoadCityList();
            this.getList();
        }
    }
</script>
<style>

</style>
